<template>
  <div class="mb-20" style="padding-top:44px;">
    <NavBar />
    <div class="flex justify-center">
      <div class="container-width">
        <div class="main">
          <div>
            <div class="xinxizixun mt-8 ">
              热门园区
            </div>
            <div class="sousuo mt-2 flex justify-between">
              <div class="sousuotext">
                全国1300+园区详情，随需调用
              </div>
              <div class="sousuoinput flex flex-row">
                <!--
                <div class="inputlable">
                  <el-select v-model="yuanquQuery.queryOption" placeholder="全站搜索">
                    <el-option
                      v-for="item in QueryOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                -->
                <div class="inputcontent">
                  <el-input v-model="yuanquQuery.objectname" placeholder="搜索园区"></el-input>
                </div>
                <div class="sousuobutton" @click="handleFilter" style="cursor: pointer;">
                  搜索
                </div>
              </div>
            </div>
            <div class="sousuotiaojian p-4">
              <div class="tiaojianhang flex flex-row">
                <div class="w-16 text-[12px] text-[#9C9C9C]" style="font-size: 12px;">
                  省份：
                </div>
                <div class="flex-1 flex flex-row flex-wrap text-[12px]" style="font-size: 12px;">
                  <div class="flex justify-center items-center px-2 mb-2" :class="yuanquQuery.province ? '' : 'active'" @click="selectProvince(0)" style="cursor: pointer;height: 21px;">
                    全部
                  </div><div class="flex flex-row" style="width: 750px;flex-flow: wrap;padding: 0 0.25rem;">
                  <div v-for="(item, index) in provinces" :key="index" class="flex justify-center items-center px-2 mb-2" :class="yuanquQuery.province === item.provincecode ? 'active' : ''" @click="selectProvince(item.provincecode, item.name)" style="cursor: pointer;">
                    {{item.name}}
                  </div></div>
                </div>
              </div>
              <div class="tiaojianhang flex flex-row">
                <div class="w-16 text-[12px] text-[#9C9C9C]" style="font-size: 12px;">
                  是否认证：
                </div>
                <div class="tiaojianhangtype  flex flex-row" style="font-size: 12px;">
                  <div class="flex justify-center items-center px-2 mb-2" :class="yuanquQuery.ifrenzheng ? '' : 'active'" @click="selectRenZheng(0)" style="cursor: pointer;height: 21px;">
                    全部
                  </div>
                  <div class="flex justify-center items-center px-2 mb-2" :class="yuanquQuery.ifrenzheng === 1 ? 'active' : ''" @click="selectRenZheng(1, '已认证')" style="cursor: pointer;">
                    已认证
                  </div>
                  <div class="flex justify-center items-center px-2 mb-2" :class="yuanquQuery.ifrenzheng === 2 ? 'active' : ''" @click="selectRenZheng(2, '未认证')" style="cursor: pointer;">
                    未认证
                  </div>
                </div>
              </div>
              <div class="tiaojianhang flex flex-row">
                <div class="w-16 text-[12px] text-[#9C9C9C]" style="font-size: 12px;">
                  园区类型：
                </div>
                <div class="tiaojianhangtype  flex flex-row" style="font-size: 12px;">
                  <div class="flex justify-center items-center px-2 mb-2" :class="yuanquQuery.yuanquleixing ? '' : 'active'" @click="selectYuanQuLeiXing(0)" style="cursor: pointer;height: 21px;">
                    全部
                  </div><div class="flex flex-row" style="width: 750px;flex-flow: wrap;padding: 0 0.25rem;">
                  <div v-for="(item, index) in sys_yuanqu_type" :key="index" class="flex justify-center items-center px-2 mb-2" :class="yuanquQuery.yuanquleixing === item.dictValue ? 'active' : ''" @click="selectYuanQuLeiXing(item.dictValue, item.dictLabel)" style="cursor: pointer;">
                    {{item.dictLabel}}
                  </div></div>
                </div>
              </div>
              <div class="tiaojianhang flex flex-row">
                <div class="w-16 text-[12px] text-[#9C9C9C]" style="font-size: 12px;">
                  园区级别：
                </div>
                <div class="tiaojianhangtype  flex flex-row" style="font-size: 12px;">
                  <div class="flex justify-center items-center px-2 mb-2" :class="yuanquQuery.guojiajibie ? '' : 'active'" @click="selectGuoJiaJiBie(0)" style="cursor: pointer;height: 21px;">
                    全部
                  </div>
                  <div class="flex flex-row" style="width: 750px;flex-flow: wrap;padding: 0 0.25rem;">
                  <div v-for="(item, index) in sys_guojiajibie" :key="index" class="flex justify-center items-center px-2 mb-2" :class="yuanquQuery.guojiajibie === item.dictValue ? 'active' : ''" @click="selectGuoJiaJiBie(item.dictValue, item.dictLabel)" style="cursor: pointer;">
                    {{item.dictLabel}}
                  </div></div>
                </div>
              </div>
              <div class="tiaojianhang flex flex-row">
                <div class="w-16 text-[12px] text-[#9C9C9C]" style="font-size: 12px;">
                  行业类型：
                </div>
                <div class="tiaojianhangtype  flex flex-row" style="font-size: 12px;">
                  <div class="flex justify-center items-center px-2 mb-2" :class="yuanquQuery.hangyeleixing ? '' : 'active'" @click="selectHangYeLeiXing(0)" style="cursor: pointer;height: 21px;">
                    全部
                  </div>
                  <div class="flex flex-row" style="width: 750px;flex-flow: wrap;padding: 0 0.25rem;">
                  <div v-for="(item, index) in bs_hangyeleixing" :key="index" class="flex justify-center items-center px-2 mb-2" :class="yuanquQuery.hangyeleixing === item.dictValue ? 'active' : ''" @click="selectHangYeLeiXing(item.dictValue, item.dictLabel)" style="cursor: pointer;">
                    {{item.dictLabel}}
                  </div></div>
                </div>
              </div>
              <div class="xianshigengduo">
                显示更多筛选
              </div>
              <div class="xuanzetiaojian flex justify-between">
                <div class="yixuantiaojian flex flex-row">
                  <div>已选条件：</div><div class="flex justify-center items-center px-2 mb-2" v-for="(item, index) in yuanquQueryLabel" :key="index">{{ item }}</div>
                </div>
                <div class="qingkong" @click="clearFilter">
                  清空
                </div>
              </div>
            </div>
            <div class="duijiecontent flex ">
              <div class="contentfix">
                <div class="fuhetiaojian flex justify-between ">
                  <div class="fuhenum" style="font-size: 12px;">
                    共有符合条件的园区 <span>{{total}} </span>家
                  </div>
                  <div class="fabutimes flex flex-row">
                    <div class="fabutime" :class="yuanquQuery.orderbyfield === 1 ? 'active':''" @click="orderByField(1)" style="cursor: pointer;">
                      <div style="font-size: 12px;">最热</div>
                      <div class="fabutimeIcon">
                        <i class="el-icon-s-fold"></i>
                      </div>
                    </div>
                    <div class="fabutime" :class="yuanquQuery.orderbyfield === 2 ? 'active':''" @click="orderByField(2)" style="cursor: pointer;">
                      <el-divider direction="vertical"></el-divider>
                      <div style="font-size: 12px;">最新</div>
                      <div class="fabutimeIcon">
                        <i class="el-icon-s-fold"></i>
                      </div>
                    </div>
                    <div class="fabutime" :class="yuanquQuery.orderbyfield === 3 ? 'active':''" @click="orderByField(3)" style="cursor: pointer;">
                      <el-divider direction="vertical"></el-divider>
                      <div style="font-size: 12px;">信息完整度</div>
                      <div class="fabutimeIcon">
                        <i class="el-icon-s-fold"></i>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content">
                  <div v-for="(item, index) in yuanquList" :key="index" class="neirongitem flex flex-row" @click="goToDetailView(item.id)" style="cursor: pointer;">
                    <div class="left">
                      <img :src="item.logourl" style="width: 246px;height: 151px;">
                      <div class="leftIcon">
                        <div class="leftIconText">{{item.guojiajibie}}</div>
                      </div>
                      <div v-if="item.ifvr == 'Y'" class="leftVR">
                        <div class="leftVRText">VR</div>
                      </div>
                    </div>
                    <div class="right flex-1">
                      <div class="name">
                        <div>{{item.objectname}}</div>
                        <div class="nameMark">{{item.yuanqujiaobiao}}</div>
                        <div style="margin-left: 10px;">{{item.yuanquname}}</div>
                        <!-- <div style="margin-left: 10px;">{{item.yuanquname}}</div> -->
                      </div>
                      <div class="address">
                        <i class="el-icon-location-outline"></i>
                        <div>{{item.address}}</div>
                      </div>
                      <div class="yuanquhuaxiang flex flex-row">
                        <div class="lable">
                          园区画像：
                        </div>
                        <div class="items flex flex-row" style="flex-flow: wrap;width: 77%;">
                          <div v-for="(item2, index2) in item.yuanqubiaoqianArr" :key="index2" class="item">
                            {{item2}}
                          </div>
                        </div>
                      </div>
                      <div class="price flex flex-row">
                        <div class="bangongfangzu">
                          <span class="lable">
                            办公房租：
                          </span>
                          <span class="price">
                            {{`${item.bangongfangzu}元/㎡/天`}}
                          </span>
                        </div>
                        <div class="gongyedijia">
                          <span class="lable">
                            工业地价：
                          </span>
                          <span class="price">
                            {{`${item.gongyedijia}万/亩起`}}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <pagination v-show="total>0" :total="total" :page.sync="yuanquQuery.pageNum" :limit.sync="yuanquQuery.pageSize" @pagination="getList" />
              </div>
              <div class="duijie" style="position: relative;" id="createParkForm">
                <div class="duijieitem p-4" :class="whether ? 'isFixed' : ''">
                  <div class="duijiexiangmu mb-3">
                    <div class="duijiexiangmuLine"></div>
                    <div class="duijiexiangmuText">创建我的园区</div>
                  </div>
                  <el-form ref="dataForm" :model="yuanquForm" label-width="0px">
                    <el-form-item label="">
                      <el-input v-model="yuanquForm.objectname" prefix-icon="el-icon-school" placeholder="园区名称"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                      <el-input v-model="yuanquForm.name" prefix-icon="el-icon-user" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                      <el-input v-model="yuanquForm.mobile" prefix-icon="el-icon-mobile-phone" placeholder="电话（必填）"></el-input>
                    </el-form-item>
                  </el-form>
                  <a href="#" class="fasong" @click="addContact" style="cursor: pointer;">
                    发送
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchParkList } from '@/api/park'
import { fetchProvinceList } from '@/api/province'
import { fetchDictList } from '@/api/dict'
import { createContact } from '@/api/contact'
import NavBar from "@/components/NavBar.vue"
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'YuanquListView',
  components: {
    Pagination,
    NavBar
  },
  data() {
    return {
      whether: false,
      QueryOptions: [{
        value: 0,
        label: '全站搜索'
      }],
      total: 0,
      yuanquQuery: {
        pageNum: 1,
        pageSize: 10,
        orderbyfield: 1,
        queryOption: 0,
        objectname: undefined,
        province: undefined,
        ifrenzheng: undefined,
        yuanquleixing: undefined,
        guojiajibie: undefined,
        hangyeleixing: undefined
      },
      yuanquQueryLabel: {
        objectname: undefined,
        province: undefined,
        ifrenzheng: undefined,
        yuanquleixing: undefined,
        guojiajibie: undefined,
        hangyeleixing: undefined
      },
      // yuanquForm: {
      //   objectname: '',
      //   name: '',
      //   mobile: ''
      // },
      yuanquList: [],
      provinces: [],
      sys_yuanqu_type: [], // 园区类型
      sys_guojiajibie: [], // 园区级别
      bs_hangyeleixing: [], // 行业类型,
      yuanquForm: {
        objectname: '',
        name: '',
        mobile: '',
        duijiefenlei:1
      }
    }
  },
  created() {
    fetchProvinceList().then(response => {
      this.provinces = response.data
    })
    fetchDictList({dictType: 'sys_yuanqu_type'}).then(response => {
      this.sys_yuanqu_type = response.data
    })
    fetchDictList({dictType: 'sys_guojiajibie'}).then(response => {
      this.sys_guojiajibie = response.data
    })
    fetchDictList({dictType: 'bs_hangyeleixing'}).then(response => {
      this.bs_hangyeleixing = response.data
    })
  },
  mounted() {
    if (this.$route.query.searchKey !== undefined && this.$route.query.searchKey !== '') {
      this.yuanquQuery.objectname = this.$route.query.searchKey
    }
    this.getList()
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    getList() {
      fetchParkList(this.yuanquQuery).then(response => {
        this.total = response.total
        this.yuanquList = response.data
      })
    },
    orderByField(filed) {
      this.yuanquQuery.orderbyfield = filed
      this.getList()
    },
    handleFilter() {
      this.getList()
    },
    goToDetailView(id) {
      this.$router.push({ name: 'yuanqu-detail', params: { id: id }})
    },
    selectProvince(value, name = '') {
      if (value === 0) {
        this.yuanquQuery.province = undefined
      } else {
        this.yuanquQuery.province = value
        this.yuanquQueryLabel.province = name
      }
      this.handleFilter()
    },
    selectRenZheng(value, name = '') {
      if (value === 0) {
        this.yuanquQuery.ifrenzheng = undefined
      } else {
        this.yuanquQuery.ifrenzheng = value
        this.yuanquQueryLabel.ifrenzheng = name
      }
      this.handleFilter()
    },
    selectYuanQuLeiXing(value, name = '') {
      if (value === 0) {
        this.yuanquQuery.yuanquleixing = undefined
      } else {
        this.yuanquQuery.yuanquleixing = value
        this.yuanquQueryLabel.yuanquleixing = name
      }
      this.handleFilter()
    },
    selectGuoJiaJiBie(value, name = '') {
      if (value === 0) {
        this.yuanquQuery.guojiajibie = undefined
      } else {
        this.yuanquQuery.guojiajibie = value
        this.yuanquQueryLabel.guojiajibie = name
      }
      this.handleFilter()
    },
    selectHangYeLeiXing(value, name = '') {
      if (value === 0) {
        this.yuanquQuery.hangyeleixing = undefined
      } else {
        this.yuanquQuery.hangyeleixing = value
        this.yuanquQueryLabel.hangyeleixing = name
      }
      this.handleFilter()
    },
    clearFilter() {
      this.yuanquQuery = {
        orderbyfield: 1,
        objectname: undefined,
        province: undefined,
        ifrenzheng: undefined,
        yuanquleixing: undefined,
        guojiajibie: undefined,
        hangyeleixing: undefined
      }
      this.yuanquQueryLabel = {
        objectname: undefined,
        province: undefined,
        ifrenzheng: undefined,
        yuanquleixing: undefined,
        guojiajibie: undefined,
        hangyeleixing: undefined
      }
      this.getList()
    },
    resetTemp() {},
    createData() {},
    addContact() {
      createContact(this.yuanquForm).then(response => {
        if (response.result === 1) {
          this.yuanquForm = {
            objectname: '',
            name: '',
            mobile: ''
          }
          this.$notify({
            title: '成功',
            message: response.msg,
            type: 'success',
            duration: 2000
          })
        } else {
          this.$notify({
            title: '错误',
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.querySelector('#createParkForm').offsetTop
      this.whether = scrollTop > offsetTop
    }
  }
}
</script>
<style lang="scss" scoped>
.isFixed {
  position: sticky;
  top: 50px;
  z-index: 600;
}
.contain {
  display: flex;
  justify-content: space-between;
}

.main .xinxizixun {
  width: 8.625rem;
  height: 2.625rem;
  font-size: 1.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
  line-height: 2.625rem;
  letter-spacing: 0.125rem;
}

/* sousuo开始 */
.main .sousuo {
  align-items: baseline;
}

.main .sousuo .sousuotext {
  width: 15.875rem;
  height: 1.25rem;
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  line-height: 1.25rem;
}

.main .sousuo .sousuoinput {
  margin-left: 4.375rem;
  width: 34.9375rem;
  height: 2.375rem;
  background: #FFFFFF;
  position: relative;
}

.main .sousuo .sousuoinput .inputlable {
  font-size: 0.875rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #5D6069;
  line-height: 1.25rem;
  border-right: 0.0625rem solid #EFEFEF;

  .el-select {
    ::v-deep .el-input {
      .el-input__inner {
        width: 122px;
        border: 0;
      }
    }
  }
}

.main .sousuo .sousuoinput .inputcontent {
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #CBCDD1;
  line-height: 1.25rem;

  .el-input {
    ::v-deep .el-input__inner {
      border: 0;
    }
  }
}

.main .sousuo .sousuoinput .inputcontent input {
  width: 21.875rem;
}

.main .sousuo .sousuoinput .sousuobutton {
  background: #FE7743;
  font-size: 0.625rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 0.875rem;
  padding: 0.4375rem 0.6875rem;
  margin: 0.3125rem;
  position: absolute;
  top: 0;
  right: 0;
}

/* sousuo结束 */
/* sousuotiaojian开始 */
.main .sousuotiaojian {
  align-items: baseline;
  margin-top: 1.75rem;
  padding-bottom: 0.625rem;
  background: #FFFFFF;
}

.main .sousuotiaojian .tiaojianhang {
  padding-top: 0.875rem;
}

.main .sousuotiaojian .tiaojianhangtype {
  font-size: 0.75rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
}

.main .sousuotiaojian .active {
  color: #FF5F00;
  border-radius: 0.25rem;
  border: 0.0625rem solid #FF5F00;
  padding: 0rem 0.375rem;
}

.main .sousuotiaojian .xianshigengduo {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #A3A3A3;
  padding-top: 1.375rem;
  margin-left: 0.8125rem;
  margin-right: 0.8125rem;
  text-align: center;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid #EFEFEF;
}

.main .sousuotiaojian .xuanzetiaojian {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #A3A3A3;
  padding-top: 0.9375rem;
  margin-left: 0.8125rem;
  margin-right: 0.8125rem;
  text-align: center;
  padding-bottom: 0.875rem;
}

/* sousuotiaojian结束 */

/* fuhetiaojian开始 */
.main .fuhetiaojian {
  margin-bottom: 0.8125rem;
}

.main .fuhetiaojian .fuhenum {
  font-size: 0.75rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #9C9C9C;
}

.main .fuhetiaojian .fuhenum span {
  color: #FF5F00;
}

.main .fuhetiaojian .fabutimes {
  font-size: 0.75rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #9C9C9C;
}

.main .fuhetiaojian .fabutime {
  display: flex;
  align-items: center;
}

.main .fuhetiaojian .fabutimeIcon {
  margin-left: 0.7rem;
}

.main .fuhetiaojian .active {
  color: #FE7743;
}

/* fuhetiaojian结束 */

/* content开始 */
.main .duijiecontent {
  margin-top: 1.875rem;
}

.main .duijiecontent .contentfix{
  flex: 1;
}

.main .duijiecontent .content {
  padding: 25px;
  background: #FFFFFF;
}

.main .duijiecontent .content .neirongitem {
  margin-bottom: 25px;
}

.main .duijiecontent .content .neirongitem .left {
  position: relative;
  width: 246px;
  height: 151px;
  margin-right: 0.875rem;
}

.main .duijiecontent .content .neirongitem .left .leftIcon{
  position: absolute;
  top: 0;
  left: 13px;
  width: 19px;
  height: 43px;
  background: url('../assets/flag.png') no-repeat;
  background-size: cover;
  display: flex;
  // flex-direction: column;
  justify-content: center;
  text-align: center;
  line-height: 16px;
  font-size: 6px;
  color: #FFFFFF;
}

.main .duijiecontent .content .neirongitem .left .leftIcon .leftIconText{
  width: 0.7rem;
  color: white;
  font-size: 0.5rem;
}

.main .duijiecontent .content .neirongitem .left .leftVR{
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width: 62px;
  height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 100%;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.4);
}

.main .duijiecontent .content .neirongitem .left .leftVR .leftVRText{
  padding-top: 0.5rem;
  color: white;
  font-size: 2rem;
}

.main .duijiecontent .content .neirongitem .right .name {
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
  display: flex;
}

.main .duijiecontent .content .neirongitem .right .name .nameMark {
  width: 1.3rem;
  height: 1.3rem;
  color: white;
  background-color: rgba(254, 119, 67, 1);
  text-align: center;
  margin-left: 0.5rem;
}

.main .duijiecontent .content .neirongitem .right .address {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #9C9C9C;
  margin-top: 1.1875rem;
  display: flex;
  align-items: center;
}

.main .duijiecontent .content .neirongitem .right .yuanquhuaxiang {
  margin-top: 1.875rem;
  font-size: 0.625rem;
  font-weight: 400;
  font-family: PingFangHK-Regular, PingFangHK;
}

.main .duijiecontent .content .neirongitem .right .yuanquhuaxiang .lable {
  color: #9C9C9C;
}

.main .duijiecontent .content .neirongitem .right .yuanquhuaxiang .items .item {
  color: #FE7743;
  margin-left: 0.375rem;
  padding-left: 0.1875rem;
  padding-right: 0.1875rem;
  border: 1px solid #FE7743;
}

.main .duijiecontent .content .neirongitem .right .price {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #9C9C9C;
  margin-top: 1.25rem;
}

.main .duijiecontent .content .neirongitem .right .price .gongyedijia {
  margin-left: 1.5625rem;
}

.main .duijiecontent .content .neirongitem .right .price .price {
  color: #FF6C2E;
}

/* content结束 */
/* duijie开始 */
.main .duijiecontent .duijie .duijieitem {
  width: 17.875rem;
  height: 19.125rem;
  margin-top: 1.875rem;
  margin-left: 1.3125rem;
  margin-bottom: 1.25rem;
  background: #FFFFFF;
}

.main .duijiecontent .duijie .duijiexiangmu {
  font-size: 1.25rem;
  font-weight: 600;
  color: #000000;
  letter-spacing: 0.0625rem;
  display: flex;
}

.main .duijiecontent .duijie .duijiexiangmu .duijiexiangmuLine {
  min-width: 0.3rem;
  background-color: rgba(254, 119, 67, 1);
}

.main .duijiecontent .duijie .duijiexiangmu .duijiexiangmuText {
  margin-left: 1rem;
}

.main .duijiecontent .duijie .xingming {
  width: 14rem;
  height: 2.75rem;
  line-height: 2.75rem;
  background: #F9FAF9;
  border-radius: 4px;
  margin-top: 1.1875rem;
  margin-left: 2.0625rem;
  padding-left: 0.625rem;

}


.main .duijiecontent .duijie .fasong {
  width: 100%;
  height: 44px;
  line-height: 2.75rem;
  background: #FE7743;
  border-radius: 4px;
  margin-top: 1.1875rem;
  text-align: center;
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #FFFFFF;
  display: block;
}



</style>